<!DOCTYPE html>
<html>
<head lang="utf-8">
    <meta charset="UTF-8">
    <title>teacher_{{roomID}}</title>
    <style>
        #msglog, #messageInput {
            border: 1px solid #ccc;
            width: 500px;
            height: 350px;
            overflow-y: auto;
            font-size: 14px;
        }

        #messageInput {
            height: 80px;
        }

        .message {
            line-height: 22px;
        }

        .message .user {
            padding-right: 5px;
            padding-left: 5px;
            color: brown;
        }

        .sysMsg {
            color: #c1bfbf;
            padding-right: 5px;
            padding-left: 5px;
            font-size: 12px;
        }

        #users {
            width: 490px;
            padding: 0 5px 5px;
        }
        body{
            background-color: paleturquoise;
        }
    </style>
</head>
<body>
昵称: <span id="userName"></span> <br/>
房间: {{roomID}} <br/>
当前在线人数: <span id="count">{{users.length}}</span> <br/>
在线学生列表:
<div id="users">
    {{users}}
</div>

<div id="msglog">

</div>
<input name="message" id="messageInput" placeholder="请输入聊天内容。。。"></input>
<br/>
按Enter键发送
<button id="joinOrLeave">退出房间</button>
<button id="talkOrShutup">禁言</button>

<script src="/socket.io/socket.io.js"></script>
<script src="/js/jquery.js"></script>
<script>
    $(function () {
        // ----------设置昵称-------------
        var userName = '';
        var userId = '';


        //处理url参数
        function GetUrlPara() {
            var url = document.location.toString();
            var arrUrl = url.split("/");
            var roomId = arrUrl[arrUrl.length - 1];
            var userInfoArrs = arrUrl[arrUrl.length - 2];
            var userInfos = userInfoArrs.split("&");
            userId = userInfos[0];
            userName = userInfos[1];
            userName = decodeURI(userName)

            console.log('url=' + url)
            console.log(arrUrl)
            console.log(roomId + '' + userInfoArrs)
            console.log('老师：' + userName + '，id=' + userId + '  进入房间：' + roomId)
        }

        // ---------创建连接-----------
        var socket = io();


        GetUrlPara();

        // 加入房间
        socket.on('connect', function () {
            console.log('connection 中的username=' + userName)
            socket.emit('join', userName);
        });


        // 监听消息
        socket.on('msg', function (userName, msg) {
            var message = '' +
                    '<div class="message">' +
                    '  <span class="user">' + userName + ': </span>' +
                    '  <span class="msg">' + msg + '</span>' +
                    '</div>';
            $('#msglog').append(message);
            // 滚动条保持最下方
            $('#msglog').scrollTop($('#msglog')[0].scrollHeight);
        });

        // 监听系统消息
        socket.on('sys', function (sysMsg, users) {
            var message = '<div class="sysMsg">' + sysMsg + '</div>';
            $('#msglog').append(message);
            $('#count').text(users.length);

//        $('#users').text(users);
            var html = '<ul>'
            users.forEach(function (value, index, array) {
                array[index] == value;    //结果为true
                html += '<li>' + value + '</li>'
            });
            html += '</ul>'
            $('#users').html(html);
        });


        socket.on('talk',function (msg) {
            $('#messageInput').removeAttr('disabled')
            $('#messageInput').attr('placeholder','请输入聊天内容。。。')
        })

        socket.on('shutup',function (msg) {
            $('#messageInput').attr('disabled','disabled')
            $('#messageInput').attr('placeholder','禁言中')
        })



        // 发送消息
        $('#messageInput').keydown(function (e) {
            if (e.which === 13) {
                e.preventDefault();
                var msg = $(this).val();
                if(msg.trim()==''){
                    return false
                }
                $(this).val('');
                socket.send(msg);
            }
        });

        // 退出房间
        $('#joinOrLeave').click(function () {
            if ($(this).text() === '退出房间') {
                $(this).text('进入房间');
                socket.emit('leave');
                var msg = '你已经退出了房间,重新发言请点击"进入房间"';
                $('#msglog').append('<div class="sysMsg">' + msg + '</div>');
            } else {
                $(this).text('退出房间');
                socket.emit('join', userName);
            }
        });

        // 退出房间
        $('#talkOrShutup').click(function () {
            if ($(this).text() === '禁言') {
                $(this).text('聊天');
                socket.emit('shutup', userName);
            } else {
                $(this).text('禁言');
                socket.emit('talk',userName);
            }
        });


    });
</script>
</body>
</html>